<template>
  <nav class="bg-blue-500 shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <!-- 网站标题 -->
          <span class="text-xl font-semibold text-white">QuickLearn</span>
        </div>
        <div class="ml-4 flex items-center">
          <div class="ml-3 relative">
            <div>
              <button 
                @click="toggleUserMenu"
                class="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white"
              >
                <span class="sr-only">打开用户菜单</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 rounded-full bg-white p-1 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </button>
            </div>
            <div 
              v-show="isUserMenuOpen"
              class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
            >
              <button @click="openUserSettings" class="block  w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">用户设置</button>
              <button @click="openChangePasswordModal" class="block  w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">修改密码</button>
              <button @click="logout" class="block  w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">注销登录</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- 修改密码弹窗 -->
  <div v-if="showChangePasswordModal" class="fixed z-10 inset-0 overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
      </div>
      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
            修改密码
          </h3>
          <div class="mt-4">
            <label for="old_password" class="block text-sm font-medium text-gray-700">旧密码</label>
            <input v-model="oldPassword" type="password" name="old_password" id="old_password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
          </div>
          <div class="mt-4">
            <label for="new_password" class="block text-sm font-medium text-gray-700">新密码</label>
            <input v-model="newPassword" @input="checkPassword" type="password" name="new_password" id="new_password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            <p v-if="!isNewPasswordValid" class="mt-2 text-sm text-red-600">新密码必须至少8位，且包含字母、数字和特殊字符</p>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button @click="changePassword" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
            确认
          </button>
          <button @click="closeChangePasswordModal" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
  <showMessage ref="showMessageRef" />
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axiosClient from '@/utils/axios'
import showMessage from '@/components/share/showMessage.vue'
import { isStrongPassword } from '@/utils/utils'

const router = useRouter()

const isUserMenuOpen = ref(false)
const showChangePasswordModal = ref(false)
const oldPassword = ref('')
const newPassword = ref('')
const showMessageRef = ref(null)
const isNewPasswordValid = ref(true)

const toggleUserMenu = () => {
  isUserMenuOpen.value = !isUserMenuOpen.value
}

const openChangePasswordModal = () => {
  isUserMenuOpen.value = false
  showChangePasswordModal.value = true
}

const closeChangePasswordModal = () => {
  showChangePasswordModal.value = false
  oldPassword.value = ''
  newPassword.value = ''
}

const checkPassword = () => {
  isNewPasswordValid.value = isStrongPassword(newPassword.value)
}

const changePassword = async () => {
  if (!isNewPasswordValid.value) {
    return
  }

  try {
    await axiosClient.post('/users/change_password', {
      old_password: oldPassword.value,
      new_password: newPassword.value
    })
    closeChangePasswordModal()
    showMessageRef.value.showMessage('密码修改成功, 三秒后自动注销', 'success')
    setTimeout(() => {
      logout()
    }, 3000)
  } catch (error) {
    console.error('修改密码失败', error)
    showMessageRef.value.showMessage('修改密码失败', 'error')
  }
}

const logout = async () => {
  try {
    await axiosClient.post('/users/logout')
    router.push('/login')
  } catch (error) {
    console.error('注销失败', error)
    showMessageRef.value.showMessage('注销失败', 'error')
  }
}

const openUserSettings = () => {
  isUserMenuOpen.value = false
  router.push('/setting')
}
</script>
